<template>
<div class="app-container">
    <el-form ref="form" :model="goodsVo" label-width="120px">
        <el-form-item label="商品名称">
            <el-input v-model="goodsVo.goods.name" placeholder="商品名称" />
        </el-form-item>
        <el-form-item label="商品类型">
            <el-select v-model="goodsVo.goods.type" clearable placeholder="商品种类">
                <el-option v-for="item in types" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
            <el-input v-model="goodsVo.goods.assessPrice" placeholder="商品估价（￥0.00）" />
        </el-form-item>
        <el-form-item label="商品描述">
            <el-input v-model="goodsVo.goods.description" placeholder="商品描述" />
        </el-form-item>
        <el-form-item label="图片上传">
            <el-upload :show-file-list="false" :on-success="handleHotelPicSuccess" :before-upload="beforeHotelPicUpload" class="hotel-uploader" action="http://localhost:8888/oss/oss/file/upload?module=goods">

                <img v-if="goodsVo.url!=''" :src="goodsVo.url" />
                <i v-else class="el-icon-plus avatar-uploader-icon" />

                <div class="el-upload__tip" slot="tip">上传商品图片</div>
                <div class="el-upload__tip" slot="tip">只能上传jpg文件，上传图片大小不能超过2MB</div>

            </el-upload>
        </el-form-item>
        <el-form-item label="创建时间">
            <el-date-picker v-model="goodsVo.goods.creationDate" type="datetime" placeholder="选择日期时间" default-time="00:00:00">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="创建人">
            <el-input v-model="goodsVo.goods.createdBy" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="add">Add</el-button>
        </el-form-item>

    </el-form>
</div>
</template>

<script>
export default {
    data: function () {
        return {
            goodsVo: {
                goods: {
                    createdBy: "lsc"
                }

            },
            types: [{
                    id: 1,
                    name: '小物件'
                },
                {
                    id: 2,
                    name: '动漫手办'
                },
                {
                    id: 3,
                    name: '仿真古玩'
                },
                {
                    id: 4,
                    name: '书法画作'
                },
                {
                    id: 5,
                    name: '其他'
                },
                {
                    id: 6,
                    name: '书籍课本'

                }
            ],

        }

    },
    methods: {

        add() {
            console.log(this.goodsVo)
            this.axios({
                url: "http://localhost:8888/goods/auction/goods/addGoods",
                method: "post",
                data: JSON.stringify(this.goodsVo),
                headers: {
                    "Content-Type": "application/json",
                },
            }).then(res => {
                console.log(res)
                if (res.data.code == 200) {
                    //跳转页面
                    this.$message({
                        message: "增加成功",
                        type: "success",
                    });
                    setTimeout(() => {
                        //需要延迟的代码 :3秒后延迟跳转到首页，可以加提示什么的
                        this.$router.push("/basic/goods");
                        //延迟时间：3秒
                    }, 1500);
                }
            })
        },
        handleHotelPicSuccess: function (res, file) {

            this.goodsVo.url = res.data.url;
            // 强制重新渲染
            this.$forceUpdate();
        },
        beforeHotelPicUpload: function (file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error("上传图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传图片大小不能超过2MB!");
            }
            return isJPG && isLt2M;
        },
    }

}
</script>

<style>
.hotel-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

}

.el-upload__tip {
    left: 120px
}

.hotel-uploader .el-upload:hover {
    border-color: #409eff;
}

.hotel-uploader .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.hotel-uploader img {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
